<html>
<head>
<title>Real Time Chat</title>


<style type="text/css">
body {
    font-family: sans-serif;
    font-size: 11pt;
}

#message-list {
    width: 640px;
    height: 200px;
    overflow-y: auto;
    list-style-type: none;
    padding-left: 0;
}
#message-list div.user {
    display: inline;
    margin: 2px;
    color: #666;
}
#message-list div.text {
    display: inline;
    margin: 2px;
}
#message-list div.timestamp {
    margin: 2px;
    font-size: 0.8em;
    color: #999;
}

#message-text {
    width: 560px;
}
</style>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

function sendMessage() {
    var text = $('#message-text').val();
    var messageList = $('#message-list');
    jQuery.post('send.php', {'text':text}, function(response){
        
        $('#message-text').val(response);
    });
    //$('#message-list').append('<li>'+text+'</li>');
    
}

function receiveMessage() {
    var messageList = $('#message-list');
    jQuery.getJSON('receive.php', null, function(response) {
        if(response.type == 'Text') {
            messageList.append('<li><div class="user">'+response.user+'</div><div   class="text">'+response.text+'</div><div class="timestamp">'+response.timestamp+'</div></li>');
            messageList.animate({'scrollTop': messageList.attr('scrollHeight')}, 1000);
        }
        receiveMessage();
    });
}   

</script>
</head>
<body onload="receiveMessage()">

<ul id="message-list"></ul>
<form onsubmit="return false">
<input type="text" id="message-text"/>
<input type="submit" value="send" onclick="sendMessage()"/>
</form>

</body>
</html>
